/* body {
    font-family: 'Helvetica';
    background:#4b4a4a;
    margin: 0;
    padding: 0;
} */
.item1 {
    grid-area: myArea;
}
  
.grid-container {
    display: grid;
    grid:
    'myArea myArea . .  .'
    'myArea myArea . .  .';
    grid-gap: 10px;
    width: 100vw;
    margin-left:19vw;
    background-color: #dbdbdb;
    padding: 10px;
}

div#screen {
    background: white;
    font-family: monospace;
    font-size: 250%;
    /*font-size:20px;*/
    display: block;
    width: 40vw;
    /*width: 1104px;*/
    /*height: 250px;*/

    height: 28vh;
    margin: 20px auto;
    
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
    box-shadow: 0 3px 5px 1px rgba(0,0,0,0.3);
}

div#screen p {
    margin: 25px;
}

div#keys {
    display: block;
    width: 90vw;
    /*width: 1104px;*/
    margin: 25px auto;
    margin-left:10px;
    padding: 10px 1px 14px 10px;
    -webkit-border-radius: 10px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius: 10px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-radius: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #4b4a4a; /* Old browsers */
}

button {
    font-family: 'Helvetica';
    width: 8vw;
    height: 11.3vh;
    background: #bbb9b9; /* Old browsers */

    border: 1px solid #7e7e7e;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px #fff;
    font-size: 16px;
    font-weight: bold;
}

button:active {
    margin-top: 7px;
    margin-bottom: 3px;
    -webkit-box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
    -moz-box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
    box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
}

button {
    float:left;
    margin: 5px;
}

div.row {
    clear: both;
}

div.row::after {
    display: block;
    content: '';
    clear: both;
}

button.active {
    color: blue;
}

#training {
    position: absolute;
    top: 0;
    right: 0;
    width: 10vw;
    background-color: #4b4a4a;
    padding: 0.1em;
  }



div#info {
    display: block;
    width: 1104px;
    margin: 25px auto;
    text-align: center;
    color: #878787;
    text-shadow: 0 1px 1px #fff;
}

a {
    text-decoration: none;
}



*{padding:0;margin:0}
.keyboard{font-family:microsoft yahei,hiragino sans gb,tahoma,arial;position:absolute;opacity: 0.95;width:98vw;height:54vh;border:1px solid #dbdbdb;z-index:999;bottom:2vh;/*left:10px*/;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-moz-user-select:none;-khtml-user-select:none;user-select:none;}
.keyboard .letterWrap>.inputCut{font-size:28px;position:relative;width:14vw;height: 11.5vh}/* 切换中英文 */
.keyboard .letterWrap>.backspace{widows: 7px;width:8vw;height: 11.5vh;color: #fd7f0a;font-size:24px;}/* 删除 */
.keyboard .letterWrap{width: 100vw;}
.keyboard .number-one,.keyboard .letter-a{margin-left:10px}
.keyboard .character-q{margin-left:10px}
.keyboard .character-a{margin-left:10px}
.keyboard .character-z{margin-left:10px}
.letterWrap>li{float:left;font-size:30px;width:8vw;height: 11.5vh;border-radius:10px;text-align:center;line-height:13.5vh;border:1px solid #dbdbdb;margin:5px;background:#fff;}/* 其他的按键 */
.inputZone{background:#dbdbdb;height:100%;/*overflow:hidden*/}
.letterWrap{width:100vw;margin-left:0 auto;overflow:hidden;box-sizing:border-box;padding:5px}
.letterWrap>li:active{background:#eee}
.keyboard li{list-style:none}
.keyboard .toUpper{font-size:24px;color:#fd7f0a}/*小写*/
.upperCase{color:#fd910a}
.keyboardOp{background:#1E90FF;height:35px;line-height:35px;font-size:20px;text-align: center;}
.keyboardOp>span{padding:0 20px;}
.keyboardOp>.slideDown{float:right;color:#fff;font-size:20px;background-color: #fd7f0a;text-align: center;}
.keyboardOp>.select{color:#fd910a}
.outputZone{display:none;position:absolute;width:61vw;background:#fff;height:30vh;margin-left:27vw;left:-1px;top:-16vh;border:1px solid #999;z-index:9999;padding:0 10px;box-sizing:border-box;font-size:70px;letter-spacing:6vw}
.outputZone>ul{height:50%}
.output-letter{border-bottom:1px solid #ccc}
.outputZoneOp{position:absolute;right:10px;top:5vh;width:15vw;height:20vh;line-height:30px}/*左箭头*/
.outputZoneOp>span{display:inline-block;height:100%;width:50%;text-align:center;font-size:80px;cursor:pointer}/*右箭头*/
.outputZoneOp>span:active{color:red}
.output-ZH{margin-left:-10px}
.output-ZH>li{padding:0 10px;cursor:pointer;float:left}
.output-ZH>li:active{color:red}
.keyboard .backspace{font-family:iconfont;font-size:24px;}/* 删除 */
.keyboard .inputCut{color:#fd910a}
.keyboard .unclick{color:#999;cursor:not-allowed}
.keyboard .hide{display:none}
.outputZone .page{position:absolute;right:10px;bottom:0;height:30px;line-height:30px;font-size:16px;letter-spacing:1vw}/*下标*/
.character{font-size:16px!important;color:#fd7f0a}
.is{display:inline-block;font-size:30px;position:absolute;left:330px;z-index:0;top:242px}
.lettera{width:8vw;height: 12vh!important}/* 最后一行+删除和小写 */
.Space-Key{width:8vw;height: 12vh!important}/* 空格 */
.space{font-size:15px;width:8vw;height: 12vh!important}/* 空格 */
.disabled{pointer-events:none;cursor:default;opacity:.6}

body {
    font-family: 'Helvetica';
    /* background:#dbdbdb; */
    margin: 0;
    padding: 0;
}

button {
    font-family: 'Helvetica';
    width: 8vw;
    height: 11.3vh;
    background: #bbb9b9; /* Old browsers */

    border: 1px solid #7e7e7e;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px #fff;
    font-size: 16px;
    font-weight: bold;
}

button:active {
    margin-top: 7px;
    margin-bottom: 3px;
    -webkit-box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
    -moz-box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
    box-shadow: inset 0 0 1px #fff, 0 1px 0 #aaa, 0 2px 0 #7e7e7e, 0 3px 3px #aaa;
}

button {
    float:left;
    margin: 5px;
}

div.row {
    clear: both;
}

div.row::after {
    display: block;
    content: '';
    clear: both;
}

button.active {
    color: blue;
}